<template>
	<view class="container">
		<view class="field"></view>
		<navigator url="/pages/practice/StPractice/StPractice">
			<button class="button" style="top: 80%; left: 46%;" @click="onclickst">ST</button>
		</navigator>
		<navigator url="/pages/practice/GkPractice/GkPractice">
			<button class="button" style="top:13%; left: 45%;" @click="onclickgk">GK</button>
		</navigator>
		<navigator url="/pages/practice/CbPractice/CbPractice">
			<button class="button" style="top: 20%; left: 35%;" @click="onclickcb">CB</button>
		</navigator>
		<navigator url="/pages/practice/CbPractice/CbPractice">
			<button class="button" style="top: 20%; left: 55%;" @click="onclickcb">CB</button>
		</navigator>
		<navigator url="/pages/practice/SbPractice/SbPractice">
			<button class="button" style="top: 28%; left: 13%;" @click="onclicksb">SB</button>
		</navigator>
		<navigator url="/pages/practice/SbPractice/SbPractice">
			<button class="button" style="top: 28%; left: 80%;" @click="onclicksb">SB</button>
		</navigator>
		<navigator url="/pages/practice/CdmPractice/CdmPractice">
			<button class="button" style="top: 38%; left: 32%;" @click="onclickcdm">CDM</button>
		</navigator>
		<navigator url="/pages/practice/CdmPractice/CdmPractice">
			<button class="button" style="top: 38%; left:60%;" @click="onclickcdm">CDM</button>
		</navigator>
		<navigator url="/pages/practice/CamPractice/CamPractice">
			<button class="button" style="top: 58%; left: 46%;" @click="onclickcam">CAM</button>
		</navigator>
		<navigator url="/pages/practice/WfPractice/WfPractice">
			<button class="button" style="top: 65%; left: 15%;" @click="onclickfw">FW</button>
		</navigator>
		<navigator url="/pages/practice/WfPractice/WfPractice">
			<button class="button" style="top: 65%; left: 75%;" @click="onclickfw">FW</button>
		</navigator>
	</view>

</template>
<script setup>
	function onclickst(){
		}
	function onclickfw(){
		}
	function onclickgk(){
	}
	function onclickcb(){
	}
	function onclickcdm(){
	}
	function onclickcam(){
	}
	
</script>
<style>
    :root {
		--lineColor: #fff;
		--fieldWidth: 200px;
		--fieldHeight: 310px;
		--centerCircle: 18px;
		--cornerCircle: 4px;
		--grandForbiddenAreaWidth: 32px;
		--grandForbiddenAreaHeight: 80px;
		--smallRestrictedAreaWidth: 11px;
		--smallRestrictedAreaHeight: 36px;
		--goalWidth: 4px;
		--goalHeight: 14px;
	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: #4a9716;
	}

	.field {
		width: calc(var(--fieldHeight) / 2);
		/* 交换宽度和高度 */
		height: var(--fieldWidth);
		/* 交换宽度和高度 */
		position: relative;
		top: -150px;
		left: calc(var(--fieldHeight) / 2 * -1+100px);
		/* 交换宽度和高度 */
		transform: scale(1.6) rotate(90deg);
		/* 添加旋转 */
		border: 2px solid var(--lineColor);
		-webkit-box-reflect: right -1px;
		background: radial-gradient(circle, #0000 var(--centerCircle) 0, var(--lineColor) calc(var(--centerCircle)), var(--lineColor) calc(var(--centerCircle) + 2px), #0000 calc(var(--centerCircle) + 2px)) no-repeat calc(var(--fieldHeight) / 4) 50%/100% 100%, radial-gradient(circle, #0000 var(--cornerCircle), var(--lineColor) calc(var(--cornerCircle)), var(--lineColor) calc(var(--cornerCircle) + 2px), #0000 calc(var(--cornerCircle) + 2px)) no-repeat calc(var(--fieldHeight) / 4 * -1) calc(var(--fieldWidth) / 2 * -1)/100%, radial-gradient(circle, #0000 var(--cornerCircle), var(--lineColor) calc(var(--cornerCircle)), var(--lineColor) calc(var(--cornerCircle) + 2px), #0000 calc(var(--cornerCircle) + 2px)) no-repeat calc(var(--fieldHeight) / 4 * -1) calc(var(--fieldWidth) / 2)/100%, conic-gradient(from -90deg at right 2px bottom 2px, rgba(31, 157, 161, 0) 0 90deg, #fff 0) 0 calc((var(--fieldWidth) - var(--grandForbiddenAreaHeight)) / 2)/var(--grandForbiddenAreaWidth) var(--grandForbiddenAreaHeight) no-repeat, linear-gradient(0deg, var(--lineColor) 2px, #0000 2px) 0px calc((var(--fieldWidth) - var(--grandForbiddenAreaHeight)) / 2)/var(--grandForbiddenAreaWidth) 2px no-repeat, conic-gradient(from -90deg at right 2px bottom 2px, rgba(31, 157, 161, 0) 0 90deg, #fff 0) 0 calc((var(--fieldWidth) - var(--smallRestrictedAreaHeight)) / 2)/var(--smallRestrictedAreaWidth) var(--smallRestrictedAreaHeight) no-repeat, linear-gradient(0deg, var(--lineColor) 2px, #0000 2px) 0px calc((var(--fieldWidth) - var(--smallRestrictedAreaHeight)) / 2)/var(--smallRestrictedAreaWidth) 2px no-repeat, repeating-linear-gradient(90deg, #56a224 0px, #56a224 10px, #a9da27 10px, #a9da27 20px);
	}

	.field::after {
		content: '';
		display: block;
		position: absolute;
		width: 40px;
		height: 40px;
		border: 2px solid #fff;
		top: calc(var(--fieldWidth) / 2 - 22px);
		/* 交换宽度和高度 */
		border-radius: 50%;
		left: calc(var(--grandForbiddenAreaWidth) - 38px);
		background: #0000;
		border-top-color: #0000;
		border-left-color: #0000;
		border-bottom-color: #0000;
	}

	.field::before {
		content: '';
		display: block;
		position: absolute;
		width: var(--goalWidth);
		height: var(--goalHeight);
		top: calc((var(--fieldWidth) - var(--goalHeight))/ 2);
		/* 交换宽度和高度 */
		left: 0;
		background: #fff;
	}

	.button {
		position: absolute;
		width: 30px;
		height: 30px;
		background-color: #fff;
		border: 2px solid #000;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		font-weight: bold;
		color: #000;
		cursor: pointer;
	}
</style>